<template>
  <el-dialog
    draggable
    ref="dialogRef"
    align-center
    destroy-on-close
    :title="title"
    :width="width"
    v-model="openDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="pub-dialog"
    :append-to-body="modalAppendToBody"
    :fullscreen="fullscreen"
    :top="top"
    @close="closeDialog"
    :show-close="!showClose"
  >
    <slot />
  </el-dialog>
</template>


<script setup>
import { ElDialog } from 'element-plus'
import { watch, computed, ref } from 'vue'
const emit = defineEmits(['update:visible', 'close'])
const props = defineProps({
  title: {
    type: String,
    default: '弹框标题'
  },
  visible: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String],
    default: '50%'
  },
  modalAppendToBody: {
    type: Boolean,
    default: true
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  top: {
    type: String,
    default: '20vh'
  },
  showClose: {
    type: Boolean,
    default: false
  }
})
const dialogRef = ref(null)
const openDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit('update:visible', val)
  }
})
const closeDialog = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style scoped>

</style>
